<template>
  <header class="todo-header">
    <h1>Todo List</h1>
    <div class="add-todo">
      <input type="text" 
      placeholder="请输入待办事项..." 
      v-model.trim="content"
      @keyup.enter="handleAddTodo"/>
      <button @click="handleAddTodo">添加</button>
    </div>
  </header>
</template>

<script setup>
import { ref } from "vue";
const emit=defineEmits(['addTodo'])
const content=ref('')
// 创建数据
const handleAddTodo=()=>{
    if(content.value){
        // 创建对象
        const todo={
            id:Date.now(),
            content:content.value,
            done:false,//未完成
        }
        // 将todo对象传给App
        emit('addTodo',todo)
        content.value=''
    }else{
        alert('请输入待办事项')
        return
    }
}
</script>

<style scoped>
.todo-header {
  padding: 5px 0 10px;
  background-color: #aa0bff;
  color: #f0f8ff;
  text-align: center;
}
.todo-header h1 {
  font-size: 24px;
}
.todo-header .add-todo {
  margin-top: 10px;
  display: flex;
  gap: 5px;
  justify-content: center;
}
.todo-header .add-todo input {
  width: 300px;
  height: 30px;
  padding: 0 10px;
  border-radius: 3px;
  outline: none;
  border: solid 1px white;
}
.todo-header .add-todo button {
  display: inline-block;
  width: 80px;
  background-color: #eee;
  color: #a60bff;
  line-height: 30px;
  border: none;
  border-radius: 3px;
}
.todo-header .add-todo button:hover {
  cursor: pointer;
  background-color: #fff;
  color: #ff6700;
}
</style>
